<template>
    <div>
        <h3>{{datalist.title}}</h3>
        <div>
            <span>{{datalist.add_time | forTime("YYYY年MM月DD日 hh时mm分ss秒")}}</span>
            <span>已经点击了:{{datalist.click}}次</span>
        </div>
        <hr/>

        <ul class="mui-table-view mui-grid-view mui-grid-9" >
            <li class="mui-table-view-cell mui-media mui-col-xs-4 " v-for="(item, index) in list">
                <img class="preview-img"  :src="item.src" height="100" @click="$preview.open(index, list)">
            </li>
        </ul>
        <p v-html="list.content"></p>
        <comment :id=id></comment>
    </div>
</template>

<script type='es6'>
    import comment from '../news/comment.vue'

    export default {
        components:{
            comment,
            prop:['id']
        },
        data(){
            //console.log(this);
            return {
                id: '',
                list:{},
                datalist:{}
            }
        },
        created(){
            this.id = this.$route.params.id
            this.getData()
            this.getImage()
        },
        methods:{
            getData(){
                var url = 'http://vue.studyit.io/api/getimageInfo/'+ this.id

                this.$http.get(url).then(function(data){
                    //console.log(data);
                    this.datalist = data.body.message[0]
                })
            },
            getImage(){
                var url = 'http://vue.studyit.io/api/getthumimages/' + this.id
                this.$http.get(url).then(function(data){
                    console.log(data);
                    this.list = data.body.message
                    this.list.forEach(function(e,i){

                        e.w = 600,
                        e.h= 400
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .mui-grid-view.mui-grid-9{
        background-color: white;
        border-top:0;
         border-left:0;
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
     border-right:0;
    border-bottom: 0;
    }
</style>  